<template>
  <van-picker
    title="性别"
    show-toolbar
    :columns="columns"
    @cancel="$emit('onclose')"
    @change="changeGender"
    @confirm="doChange"
    :default-index="value"
  />
</template>

<script>
// 导入更新用户 信息 api方法
import { updateUser } from '@/api/user.js'

export default {
  props: {
    // v-model默认绑定的属性
    value: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      columns: ['男', '女'],
      // 保存 选中的 元素下标
      selctedIndex: 0
    }
  },
  methods: {
    // 1.改变性别选项--------------------------------
    changeGender(piker, gender, genderI) {
      this.selctedIndex = this.genderI
    },
    // 2.确定改变性别---------------------------------
    async doChange(gender, genderI) {
      try {
        // a.调用 修改 用户资料接口，更新性别
        await updateUser({ gender: genderI })
        // b.更新成功，关闭弹窗，并 将 新性别 传给父组件的 usr.gender
        this.$emit('input', genderI)
        this.$emit('onclose')
        this.$toast.success('更新成功~！')
      } catch (error) {
        this.$toast.fail('更新失败~')
      }
    }
  }
}
</script>

<style scoped lang='less'>
</style>
